<template>
	<el-card v-loading="loading" style="margin-bottom:20px">
		<template #header>
			<span>{{ inner || _userInfo.userId === userStore.userId ? '我的名片' : '用户名片' }}</span>
		</template>

		<div class="user-profile">
			<div class="box-center">
				<pan-thumb :image="(inner ? handleAvatarUrl(userStore.avatar) : handleAvatarUrl(_userInfo.avatar)) || IMAGE_URL.defaultAvatar" height="100px"
				           width="100px">
					<div>Hello</div>
					<div v-if="props.showAuth">{{ inner ? userStore.roleCodes.join(', ') : _userInfo.roleCodes.join(', ') }}</div>
				</pan-thumb>
			</div>
			<div class="box-center">
				<div class="user-name text-center">{{ inner ? userStore.nickname : _userInfo.nickname }}</div>
				<div v-if="props.showAuth" class="user-role text-center text-muted">
					{{ inner ? userStore.roleNames.join(', ') : _userInfo.roleNames.join(', ') }}
				</div>
			</div>
		</div>

		<div class="user-bio">
			<div class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="el-icon-UserFilled"></icon>
					<span>用户名</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ inner ? userStore.username : _userInfo.username }}
					</div>
				</div>
			</div>
			<div class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="local-cus-role"></icon>
					<span>昵称</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ inner ? userStore.nickname : _userInfo.nickname }}
					</div>
				</div>
			</div>
			<div class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="fa fa-transgender-alt"></icon>
					<span>性别</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ getBusinessCodeName('gender', inner ? userStore.gender : _userInfo.gender) }}
					</div>
				</div>
			</div>
			<div v-if="props.showAuth" class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="local-cus-authority"></icon>
					<span>用户角色</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ inner ? userStore.roleNames.join(', ') : _userInfo.roleNames.join(', ') }}
					</div>
				</div>
			</div>
			<div v-if="props.showAuth" class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="local-aliIntl-email-fill"></icon>
					<span>邮箱</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ (inner ? userStore.email : _userInfo.email) || '无' }}
					</div>
				</div>
			</div>
			<div class="user-education user-bio-section">
				<div class="user-bio-section-header">
					<icon name="el-icon-InfoFilled"></icon>
					<span>个人简介</span></div>
				<div class="user-bio-section-body">
					<div class="text-muted">
						{{ (inner ? userStore.introduction : _userInfo.introduction) || DEFAULT_USER.DEFAULT_INTRODUCTION }}
					</div>
				</div>
			</div>
			<!--			<div class="user-skills user-bio-section">-->
			<!--				<div class="user-bio-section-header">-->
			<!--					<icon name="local-cus-skill"></icon>-->
			<!--					<span>Skills</span></div>-->
			<!--				<div class="user-bio-section-body">-->
			<!--					<div class="progress-item">-->
			<!--						<span>Vue</span>-->
			<!--						<el-progress :percentage="70"/>-->
			<!--					</div>-->
			<!--					<div class="progress-item">-->
			<!--						<span>JavaScript</span>-->
			<!--						<el-progress :percentage="18"/>-->
			<!--					</div>-->
			<!--					<div class="progress-item">-->
			<!--						<span>Css</span>-->
			<!--						<el-progress :percentage="12"/>-->
			<!--					</div>-->
			<!--					<div class="progress-item">-->
			<!--						<span>ESLint</span>-->
			<!--						<el-progress :percentage="100" status="success"/>-->
			<!--					</div>-->
			<!--				</div>-->
			<!--			</div>-->
		</div>
	</el-card>
</template>

<script lang="ts" setup>
import PanThumb from '@/components/pan-thumb.vue'
import {useUserStore} from '@/stores/modules/user.store'
import {CACHE_DURATION, DEFAULT_USER, IMAGE_URL} from '@/utils/constantsUtil'
import Icon from '@/components/icon.vue'
import {reactive, ref} from 'vue'
import {getUserCardInfoApi} from '@/api/system/common.api'
import {getBusinessCodeName, handleAvatarUrl} from '@/utils/commonUtil'
import {useUserCacheStore} from '@/stores/modules/userInfo.store'
import type {UserInfo} from '@/model/user-import'
import {cloneDeep} from 'lodash-es'

interface Props {
	userId?: number
	userInfo?: UserInfo
	// 是否显示用户权限信息
	showAuth?: boolean
}

const props = withDefaults(defineProps<Props>(), {
	userId: undefined,
	userInfo: undefined,
	showAuth: false
})

const userStore = useUserStore()
const userCacheStore = useUserCacheStore()

const loading = ref(false)

// 是否使用userStore中的用户信息
const inner = ref(false)

const _userInfo = reactive<UserInfo>({
	roleCodes: [],
	roleNames: []
})

const resetUserInfo = () => {
	_userInfo.userId = undefined
	_userInfo.nickname = undefined
	_userInfo.username = undefined
	_userInfo.email = undefined
	_userInfo.gender = undefined
	_userInfo.avatar = undefined
	_userInfo.introduction = undefined
	_userInfo.roleCodes = []
	_userInfo.roleNames = []
}

/**
 * 优先使用传入的userInfo，其次使用userId查询用户信息，最后使用userStore中的用户信息
 */
if (props.userInfo) {
	resetUserInfo()
	Object.assign(_userInfo, props.userInfo)
	// 如果给了userId，缓存中没有则加入，有则覆盖
	if (props.userInfo.userId && props.userInfo.userId > 0) {
		const userCacheElement = userCacheStore.userCache[props.userInfo.userId]
		if (userCacheElement && userCacheElement.expire && userCacheElement.expire > Date.now()) {
			Object.assign(userCacheElement, props.userInfo)
		} else {
			userCacheStore.userCache[props.userInfo.userId] = cloneDeep(props.userInfo)
			userCacheStore.userCache[props.userInfo.userId].expire = Date.now() + CACHE_DURATION.USER_CARD
		}
	}
} else if (props.userId && props.userId > 0) {
	// 先尝试从缓存中获取用户信息
	const userCacheElement = userCacheStore.userCache[props.userId]
	if (userCacheElement && userCacheElement.expire && userCacheElement.expire > Date.now()) {
		resetUserInfo()
		Object.assign(_userInfo, userCacheElement)
	}
	// 如果缓存中没有，则查询用户信息，并加入缓存
	else {
		loading.value = true
		getUserCardInfoApi(props.userId).then(response => {
			resetUserInfo()
			Object.assign(_userInfo, response.data)
			userCacheStore.userCache[props.userId!] = response.data
			userCacheStore.userCache[props.userId!].expire = Date.now() + CACHE_DURATION.USER_CARD
		}).finally(() => {
			loading.value = false
		})
	}
} else {
	inner.value = true
}

</script>

<style lang="scss" scoped>
.box-center {
	display: table;
	margin: 0 auto;
}

.text-muted {
	color: #777;
}

.user-profile {
	.user-name {
		font-weight: bold;
	}

	.box-center {
		padding-top: 10px;
	}

	.user-role {
		font-size: 14px;
		font-weight: 400;
		padding-top: 10px;
	}

	.box-social {
		padding-top: 30px;

		.el-table {
			border-top: 1px solid #dfe6ec;
		}
	}

	.user-follow {
		padding-top: 20px;
	}
}

.user-bio {
	color: #606266;
	margin-top: 20px;

	span {
		padding-left: 4px;
	}

	.user-bio-section {
		font-size: 14px;
		padding: 15px 0;

		.user-bio-section-header {
			border-bottom: 1px solid #dfe6ec;
			font-weight: bold;
			margin-bottom: 10px;
			padding-bottom: 10px;
		}
	}
}

.user-skills {
	.progress-item {
		font-size: 14px;
		margin-bottom: 10px;
	}
}
</style>
